<template>
  <div class="page-table">
    <!-- 列表 -->
    <div class="table-cont" ref="tableCont">
      <h-table
        :maxHeight="maxHeight"
        ref="HTable"
        :headAlgin="headAlgin"
        :bodyAlgin="bodyAlgin"
        :columns="tableConfig.columnsData"
        :data="tableConfig.tableData"
        @on-selection-change="selectionChange"
        canDrag
        border
        stripe
        fixedAutoHeight
        :showTitle="true"
      ></h-table>
      <div class="pager-box">
        <h-page
          size="small"
          :total="currentTablePage.total"
          :current="currentTablePage.current"
          show-sizer
          show-elevator
          show-total
          @on-change="tablePageChange"
          @on-page-size-change="pageSizeChange"
          :is-blur="true"
        ></h-page>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //表头和列、table的配置的数据对象
    tableConfig: {
      type: [Object],
      default: () => {}
    },

    headAlgin: {
      type: [String],
      default: 'left'
    },
    bodyAlgin: {
      type: [String],
      default: 'left'
    },
    height: {
      type: [String, Number],
      default: ''
    },
    isShowBtn: {
      type: [Boolean],
      default: false
    },
    currentTablePage: {
      type: [Object],
      default: function () {
        return {}
      }
    }
    // topBtnConfig
  },
  data: () => {
    return {
      maxHeight: ''
      //   currentTablePage: {
      //     total: 0,
      //     size: 10, //	页面大小
      //     current: 1 //	当前页码
      //   }
    }
  },
  computed: {
    autoHeight: function () {
      this.$nextTick(() => {
        //   console.log(this.$refs.HTable.$parent.$el.parentElement.parentElement.clientHeight - 300, 21312)
        let height = this.$refs.HTable.$parent.$el.parentElement.parentElement.clientHeight - 100
        return 500
      })
      //当数据只有十条的时候全部展示，如果超过十条就出现滚动条，低于十条自适应
      /* if (this.currentTablePage.size == 10 && this.currentTablePage.total > 10) {
        this.$nextTick(() => {
          return this.$refs.HTable.$el.clientHeight
        })
      } else if (this.currentTablePage.total < 10) {
        return this.height
      } else if (this.currentTablePage.size > 10 && this.currentTablePage.total > 10) {
        this.$nextTick(() => {
          //   console.log(this.$refs.HTable.$parent.$el.parentElement.parentElement.clientHeight - 300, 21312)
          let height = this.$refs.HTable.$parent.$el.parentElement.parentElement.clientHeight - 100
          return height
        })
        // return this.height
        // return 545
      } */
    }
  },
  created() {},

  mounted() {
    this.adjustHeight()
    // if (window.LOCAL_CONFIG.IS_SEE) {
    //   this.maxHeight = this.$refs.HTable.$parent.$el.offsetParent.children[0].children[0].clientHeight - 168
    // } else {
    //   this.maxHeight = this.$refs.HTable.$parent.$el.offsetParent.children[1].children[0].clientHeight - 168
    // }

    // console.log(
    //   this.maxHeight,
    //   this.$refs.HTable.$parent.$el.parentElement.parentElement,
    //   this.$refs.HTable.$parent.$el.offsetParent.children[1].children[0]
    // )
  },
  methods: {
    adjustHeight() {
      let that = this;
      setTimeout(() => {
        that.maxHeight = that.$refs.tableCont.clientHeight - 56
      })
    },
    tablePageChange(i) {
      this.currentTablePage.current = i
      this.$emit('tablePageChange', this.currentTablePage)
      //   console.log('tablepagechange', i)
    },
    pageSizeChange(val) {
      this.currentTablePage.size = val
      this.$emit('pageSizeChange', this.currentTablePage)
      //   console.log('tablesizechange', val)
    },
    //只要选中项发生变化时就会触发，返回值为 selection，已选项。
    selectionChange(selection) {
      this.$emit('selectionChange', selection)
    },
    //批量删除
    batchDelete() {
      this.$emit('batchDelete')
    },
    //批量下载
    batchDownload() {
      this.$emit('batchDownload')
    },
    //上传分镜
    uploadMir() {
      this.$emit('uploadMir')
    }
  }
}
</script>
<style lang="scss" scoped>
.top-btn {
  margin-bottom: 16px;
  button {
    margin-right: 16px;
  }
}
.page-table {
  margin-top: 10px;
}
/deep/ .h-select-dropdown {
  will-change: top, left, bottom !important;
  top: -140px !important;
}

.pager-box {
  float: right;
  margin: 15px 10px;
}
.table-cont{
	flex: 1
}
/deep/ .h-table-body{
	.red{
		color: red;
	}
	.green{
		color: rgb(6, 229, 6);
	}
}
</style>